<template>
  <div class="header_1">
    <!-- 未登录状态 -->
    <div class="login-status" v-if="!user.username">
      <span>你好，欢迎来到</span>
      <router-link to="/shop" class="auth-link">我的商城</router-link>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
    </div>

    <!-- 已登录状态 -->
    <div class="login-status" v-else>
      <span>你好，{{ user.username }}</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <img
            :src="user.avatar"
            alt="头像"
            style="
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 6px;
            "
          />
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="goToProfile"
            >个人中心</el-dropdown-item
          >
          <el-dropdown-item divided @click.native="logOff"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 右侧导航 -->
    <div class="nav-links">
      <el-dropdown @command="handleOrderCommand">
        <span class="el-dropdown-link">
          我的订单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="WAIT_PAY">待付款订单</el-dropdown-item>
          <el-dropdown-item command="WAIT_ROG">待收货订单</el-dropdown-item>
          <el-dropdown-item command="WAIT_COMMENT">待评价订单</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="link-item spacer"></div>
      <el-dropdown @command="handleCollectCommand">
        <span class="el-dropdown-link">
          我的收藏<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="goods">收藏的商品</el-dropdown-item>
          <el-dropdown-item command="shop">收藏的店铺</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="link-item spacer"></div>
      <el-dropdown @command="handleSiteCommand">
        <span class="el-dropdown-link">
          站点导航<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="home">商城首页</el-dropdown-item>
          <el-dropdown-item v-if="user.have_shop" command="my-shop"
            >我的店铺</el-dropdown-item
          >
          <el-dropdown-item v-else command="apply-shop"
            >商家入驻</el-dropdown-item
          >
          <el-dropdown-item command="profile">个人中心</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="link-item spacer"></div>
      <router-link to="/customerServ" class="el-dropdown-link"
        >帮助中心</router-link
      >
      <div class="link-item spacer"></div>
      <span class="el-dropdown-link">服务消息[0]</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      user: {},
    };
  },
  computed: {
    ...mapGetters("user", ["isLogin", "user"]),
  },
  created() {
    // const str = sessionStorage.getItem("user") || "{}";
    // this.user = JSON.parse(str);
    const str = localStorage.getItem("user") || "{}";
    this.user = JSON.parse(str);
  },
  methods: {
    isLoggedIn() {
      if (!this.user.username) {
        this.$confirm("您尚未登录，是否前往登录页面？", "温馨提示", {
          confirmButtonText: "去登录",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
        return false;
      }
    },
    logOff() {
      sessionStorage.clear();
      localStorage.clear();
      this.user = {};
      this.$message.success("您已登出");
      this.$router.replace("/");
    },
    goToProfile() {
      if (!this.isLoggedIn()) return;
      this.$router.push("/mine");
    },
    handleOrderCommand(command) {
      if (!this.isLoggedIn()) return;
      this.$router.push("/myOrder");
    },
    handleCollectCommand(command) {
      if (!this.isLoggedIn()) return;
      const routes = {
        goods: "/member/goods-collection",
        shop: "/member/shop-collection?type=shop",
      };
      this.$router.push(routes[command]);
    },
    handleSiteCommand(command) {
      if (command === "home") {
        window.location.href = "/";
        return;
      }

      if (!this.isLoggedIn()) return;

      switch (command) {
        case "my-shop":
          this.$router.push("/shop");
          break;
        case "apply-shop":
          this.$router.push("/shop/apply/");
          break;
        case "profile":
          this.$router.push("/member");
          break;
      }
    },
  },
};
</script>

<style scoped>
.header_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ccc;
  height: 45px;
  padding: 0 20px;
  font-size: 14px;
}

.login-status {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #666;
}

.auth-link {
  color: #666;
  text-decoration: none;
}
.link-item.spacer {
  overflow: hidden;
  width: 1px;
  height: 30px;
  background-color: #ccc;
}
.auth-link:hover {
  color: #000;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
}

.el-dropdown-link:hover {
  color: #000;
}

.el-icon-arrow-down {
  margin-left: 4px;
}
</style>
